<template>
	<view>
		<view class="p-l-30 p-r-30">

			<view class="font-40">需求填写</view>
			<view class="formItem flex_b">
				<view class="font-30">姓名</view>
				<input type="text" placeholder="请输入你的真实姓名" v-model="form.realname" placeholder-class="grey font-30">
			</view>

			<view class="formItem flex_b">
				<view class="font-30">联系方式</view>
				<input type="tel" maxlength="11" placeholder="请输入你的联系方式" v-model="form.mobile"
					placeholder-class="grey font-30">
			</view>
			<view class="formItem flex_b" @click="shopXz">
				<view class="font-30">求租类型</view>
				<view class="grey font-30">{{nameType||'请选择'}}<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view>
			<view class="formItem flex_b" @click="statusFnA">
				<view class="font-30">商铺性质</view>
				<view class="grey font-30">{{form.rent_nature=='2'?'出租':form.rent_nature=='1'?'转让':'请选择'}}<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view> 
			<view class="formItem flex_b">
				<view class="font-30">求租面积</view>
				<view class="flex">
					<input type="digit" placeholder="请输入面积" v-model="form.area" placeholder-class="grey font-30">m²
				</view>
			</view>

		<!-- 	<view class="formItem flex_b">
				<view class="font-30">月租</view>
				<input type="text" placeholder="请输入月租" v-model="form.month_rent" placeholder-class="grey font-30">
			</view> -->

			<view class="formItem flex_b" @click="addressFn">
				<view class="font-30">所在城市</view>
				<view class="grey font-30">{{addressTitle||'请选择'}}<text class="iconfont icon-xiangyoujiantou"></text>
				</view>
			</view>
			<view class="formItem flex_b" @click="selectAddress">
				<view class="font-30">理想位置</view>
				<view class="grey font-30" v-if="!form.latitude">请选择<text class="iconfont icon-xiangyoujiantou"></text>
				</view>
				<view class="grey font-30" v-else>{{latName}}<text class="iconfont icon-xiangyoujiantou"></text>
				</view>
			</view>
<!-- 			<view class="formItem flex_b">
				<view class="font-30">门牌号</view>
				<input type="text" placeholder="请输入" v-model="address" placeholder-class="grey font-30">
			</view>

			<view class="formItem flex_b">
				<view class="font-30">楼层</view>
				<input type="text" placeholder="请输入楼层" v-model="form.floor" placeholder-class="grey font-30">
			</view> -->
			
			<view class="formItem flex_b">
				<view class="font-30">详细要求</view>
				<input type="text" placeholder="请输入要求" v-model="form.demand" placeholder-class="grey font-30">
			</view>
			
	<!-- 		<view class="formItem flex_b" @click="selectIndustry">
				<view class="font-30">行业</view>
				<view class="grey font-30">{{nameIndustry||'请选择'}}<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view> -->
		
<!-- 			<view class="formItem flex_b" @click="selCoupon">
				<view class="font-30">优惠券</view>
				<view class="grey font-30">{{couponName||'请选择'}}<text class="iconfont icon-xiangyoujiantou"></text></view>
			</view> -->
			
	<!-- 		<view class="formItem flex_b">
				<view class="font-30">标题</view>
				<input type="text" placeholder="请输入标题" v-model="form.title" placeholder-class="grey font-30">
			</view> -->
			
			
			
			<!-- <view class="formItem flex_b" v-if="form.rent_nature==1">
				<view class="font-30">转让费</view>
				<input type="text" placeholder="请输入转让费" v-model="form.transfer_fee" placeholder-class="grey font-30">
			</view> -->	
			
			
			<view class="formItem">
				<view class="font-40 m-t-30 m-b-20">配套设施选择</view>
				
				<view class="facilitiesList">
					<view v-for="(item,index) in facility" :key="index" @click="selectFn(item.id)"
						class="facilitiesItemA m-b-20">
						<view class="facilitiesItem" :class="includesFn(item.id)!='-1'?'active':''">
							<image :src="$util.img(item.image)" mode=""></image>
							<view class="m-t-4">{{item.name}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>

		<view class="bottom-mar h-100"></view>

		<view class="bomPosition ">
			<view class="flex_b m-b-10">
				<button class="kefu textC m-l-30" open-type="contact">
					<view class="iconfont icon-kefu" style="font-size: 30rpx;"></view>
					<view class="font-28">客服</view>
				</button>
				<view class="buttonBtn">
					<view class="" @click="submit(0)">免费提交</view>
					<view class="" @click="submit(1)">人工客服精准一对一对接</view>
				</view>
			</view>

		</view>

		<uv-popup ref="popupPLone" round="8" :safeAreaInsetBottom="false" :closeable="true">
			<view class="payBox">
				<view class="font-36 font-weight">支付金额(元)</view>
				<view class="font-60 font-weight f-t m-t-40">{{siting_rent_price||0}}元</view>
				<view class="m-b-30 m-t-30" style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
				<button type="primary" @click="submitPlone(order_no)">支付定金</button>
				<view class="flex m-t-30" @click="payShow=!payShow">
					<view class="iconfont icon-weixuanzhong" v-if="!payShow" style="font-size: 40rpx;"></view>
					<view class="iconfont icon-choose f-t" v-else style="font-size: 40rpx;"></view>
					<view class="">我已阅读并同意<text style="color: #385373;" @click.stop="xieYi">《支付协议》</text></view>
				</view>
			</view>
		</uv-popup>
		<!-- 选择位置 -->
		<uv-picker ref="picker" :columns="columns" keyName="name" @confirm="pickerConfirm" @change="pickerChange">
		</uv-picker>
		<!-- 行业 -->
		<uv-picker ref="pickerIndustry" :columns="columnsIndustry" keyName="name" @confirm="confirmIndustry" @change="changeIndustry">
		</uv-picker>
		<!-- 类型 -->
		<uv-picker ref="pickerType" :columns="columnsType" keyName="name" @confirm="confirmType">
		</uv-picker>
		<!-- 商圈 -->
		<uv-picker ref="pickerSq" :columns="columnsSq" keyName="name" @confirm="confirmSq">
		</uv-picker>
		<!-- 支付协议 -->
		<uv-popup ref="popupPay" round="8" :safeAreaInsetBottom="false" :closeable="true">
			<scroll-view scroll-y="true" class="payBox">
				<view v-html="pay_agreement">
				</view>
			</scroll-view>
		</uv-popup>
	
		
		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script>
	import base from "@/common/js/config.js"
	export default {
		data() {
			return {
				pay_agreement:'',
				payShow:false,
				columnsIndustry:[[]],
				columnsType:[[]],
				columnsSq:[[]],
				columns: [
					[],
					[],
					[]
				],
				arrs: [],
				facility: [],
				form: {
					demand:'',
					realname: '',
					mobile: '',
					area: '',
					month_rent: '',
					province: '',
					city: '',
					district: '',
					floor: '',
					longitude: '',
					latitude: '',
					rent_nature:'',
					coupon_id:'0',
					industry_id:'',
					seeking_type:'',
					transfer_fee:'',
					title:''
				},
				selLatitude: '',
				selLongitude: '',
				latName: '',
				address:'',
				images:[],
				nameIndustry:'',
				columnIndexA: 0,
				addressTitle: '',
				nameType:'',
				money:0,
				operate_area_id:'',//首页设置的id
				area_id:'',//当前页设置的id
				namebusinessarea:'',
				rental_shop_price:'',
				transfer_shop_price:'',
				couponName:'',
				order_no:'',
				structure:'',
				old_new:'',
				feature:'',
				factory_warehouse_price:'',
				siting_rent_price:''
			};
		},
		onLoad(res) {
			this.getHomeDetali()
			this.getAddress()
			this.configFn()
		},
		onShow() {
			let that = this
			uni.$once('yhq', function(data) {
				console.log('监听到事件来自返回的参数：', data);
				that.form.coupon_id = data.id
				that.couponName = data.coupon_name
			})
			uni.getStorage({
				key: 'cityId',
				success: res => {
					this.operate_area_id = res.data
				},
				fail:err=> {
					this.operate_area_id = ''
				}
			})
		},
		methods: {
			// 类型确定
			confirmType(e) {
				this.nameType = e.value[0].name
				this.form.seeking_type = e.value[0].id
			},
			// 行业确定
			confirmIndustry(e) {
				this.nameIndustry = e.value[0].name
				this.form.industry_id = e.value[0].id
			},
			xieYi() {
				this.$refs.popupPay.open('center');
			},
			// 状态2
			statusFnA() {
				uni.showActionSheet({
					itemList: ['转让', '出租'],
					success:res=> {
						console.log(res);
						this.form.rent_nature = res.tapIndex+1
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 删除图片
			closeImg(i) {
				this.images.splice(i,1)
			},
			addImgFn() {
				// 添加图片
					uni.chooseImage({
						count: 4-this.images.length,
						success: res => {
							res.tempFilePaths.forEach((item, i) => {
								wx.showLoading({
									title: '上传中(' + (i + 1) + '/' +
										res.tempFilePaths.length + ')'
								})
								uni.uploadFile({
									url: `${base.baseUrl}/api/common/upload`,
									filePath: item,
									name: 'file',
									success: resA => {
										let a = JSON.parse(resA.data)
										console.log(a,'aaaaaaa');
										this.images.push(a.data.fullurl)
										console.log(this.images,'=-=-=');
									},
									fail: errA => {
										console.log(errA);
									}
								});
								if (i + 1 == res.tempFilePaths.length) {
									wx.hideLoading()
								}
							})
				
						},
						fail(err) {
							console.log(err);
						}
					})
				
			},
			
			selCoupon() {
				let money = this.factory_warehouse_price
				// 选择优惠券
				this.$util.redirectTo('/otherpages/useYhq/useYhq',{money:money})
			},
			changeIndustry(e) {
				
			},
			selectIndustry() {
				// 行业打开选择  pickerIndustry
				this.$refs.pickerIndustry.open();
			},
			// 地址确定
			pickerConfirm(e) {
				this.area_id = e.value[1].id
				this.addressTitle = e.value[0].name + ',' + e.value[1].name + ',' + e.value[2].name
				this.form.province = e.value[0].name
				this.form.city = e.value[1].name
				this.form.district = e.value[2].name
				this.selLatitude = e.value[2].lat
				this.selLongitude = e.value[2].lng
				// this.getBusi()
			},
			// 切换地址
			pickerChange(e) {
				if (e.columnIndex == 0) {
					this.getAddressA(e.value[0].id)
				} else if (e.columnIndex == 1) {
					this.columnIndexA = e.indexs[1]
					this.getAddressB(e.value[1].id, e.value[0].id)
				}
			},
			// 省
			getAddress() {
				this.$api.sendRequest({
					url: '/api/common/area',
					data: {},
					success: res => {
						if (res.code == 1) {
							this.columns[0] = res.data
							this.getAddressA(res.data[0].id)
						}
					}
				})
			},
			// 市
			getAddressA(id) {
				this.columns[1] = []
				this.$api.sendRequest({
					url: '/api/common/area',
					data: {
						province: id,
					},
					success: res => {
						if (res.code == 1) {
							this.columns[1] = res.data
							this.getAddressB(res.data[this.columnIndexA].id, id)
							this.$forceUpdate()
						}
					}
				})
			},
			// 区
			getAddressB(id, province) {
				this.$api.sendRequest({
					url: '/api/common/area',
					data: {
						province: province,
						city: id
					},
					success: res => {
						if (res.code == 1) {
							this.columns[2] = res.data
							this.$forceUpdate()
						}
					}
				})
			},
			addressFn() {
				this.$refs.picker.open();
			},
			// 配置信息
			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						// 配套设施
						this.facility = res.data.facility
						// 行业
						this.columnsIndustry[0] = res.data.industry
					}
				})
			},

			// 打开状态
			shopXz() {
				this.$refs.pickerType.open();
			},
			// 推广提交
			submit(type) {
				this.$api.sendRequest({
					url:'/api/sitingrent/create',
					data:{
						...this.form,
						address: this.latName,
						order_type:type,
						facility_ids:this.arrs.toString(),
					},success:res=>{
						if(res.code==1) {
							if(res.data.pay_status==0) {
								// 全网
								this.order_no = res.data
								this.$refs.popupPLone.open('center');
							}else {
								// 免费
								this.$refs.uToast.show({
									type: 'default',
									message: '提交成功',
									duration:1500
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1500)
							}
						}else {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration:1500
							})
						}
						
					}
				})
			},
			submitPlone(order_no) {
				if(!this.payShow) {
					uni.showToast({
						title:'请先勾选协议',
						icon:'error'
					})
					return
				}
				this.$api.sendRequest({
					url:'/api/sitingrent/pay',
					data:{
						order_no:order_no
					},success:res=>{
						let data = res.data
						if(res.code==1) {
							uni.requestPayment({
								"provider": "wxpay",
								timeStamp: data.timeStamp, //后端返回的时间戳
								nonceStr: data.nonceStr, //后端返回的随机字符串
								package: data.package, //后端返回的prepay_id
								signType: data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
								paySign: data.paySign, //后端返回的签名
								success: res => {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										cancelText: '确定',
										showCancel: false,
										success: resA => {
											uni.navigateBack()
										}
									});
								},
								fail(e) {
									uni.showToast({
										title: '取消支付',
										icon: 'error'
									})
								}
							})
						}else {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration:1500
							})
						}
					}
				})
			},
			// indexOf
			selectFn(i) {
				if (this.includesFn(i) == '-1') {
					this.arrs.push(i)
				} else {
					this.arrs.splice(this.includesFn(i), 1)
				}

			},
			includesFn(i) {
				return this.arrs.indexOf(i)
			},

			// 获取位置
			selectAddress() {
				var that = this;
				uni.chooseLocation({
					latitude: this.selLatitude,
					longitude: this.selLongitude,
					success(res) {
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
						that.latName = res.name;
					},
					fail(res) {
						uni.getSetting({
							success: (res)=> {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success:(data)=> {

														if (data.authSetting[
																'scope.userLocation'
															] === true) {
															this.$util.showToast({
																title: '授权成功'
															});
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(function() {
																uni.chooseLocation({
																	latitude: that.selLatitude,
																	longitude: that.selLongitude,
																	success: res => {
																		that.form.latitude = res.latitude;
																		that.form.longitude = res.longitude;
																		that.latName = res.name;
																	}
																});
															}, 1000);
														}
													}
												});
											} else {
												this.$util.showToast({
													title: '授权失败'
												});
											}
										}
									});
								}
							}
						});
					}
				});
			},
			configFn() {
				this.$api.sendRequest({
					url:'/api/index/config',
					success:res=>{
						this.pay_agreement = res.data.pay_agreement
						this.siting_rent_price = res.data.siting_rent_price
						let arrs = Object.keys(res.data.type_list)
						arrs.forEach((item,i)=>{
							this.columnsType[0].push({name:res.data.type_list[item],id:item})
						})
						
					}
				})
			},
			// 上传视频
			addVideo() {
				let that = this
				uni.chooseVideo({
					success: res => {
						uni.uploadFile({
							url: `${base.baseUrl}/api/common/upload`,
							filePath: res.tempFilePath,
							name: 'file',
							success: resA => {
								let a = JSON.parse(resA.data)
								this.video = a.data.url
								this.$forceUpdate()
							},
							fail(err) {
								console.log(err,'err+++');
							}
						});
			
					},fail(err) {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.addImg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		border: 1rpx solid #cfcfcf;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		view {
			font-size: 60rpx;
			color: #b4b4b4;
		}
	}
	.addImgA {
		margin-left: 10rpx;
		width: 160rpx;
		height: 160rpx;
		position: relative;
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}
		view {
			position: absolute;
			top: -5rpx;
			right: 0;
		}
	}
	.payBox {
		width: 514rpx;
		height: 370rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 30rpx 25rpx;
	}

	.kefu {
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	.buttonBtn {
		display: flex;
		align-items: center;

		view {
			line-height: 76rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}

		:nth-child(1) {
			left: 282rpx;
			top: 0rpx;
			width: 202rpx;
			height: 76rpx;
			opacity: 1;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			background: #3bc48c;
		}

		:nth-child(2) {
			left: 282rpx;
			top: 0rpx;
			width: 382rpx;
			height: 76rpx;
			opacity: 1;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			background: rgba(229, 99, 43, 1);
		}


	}

	.facilitiesList {
		display: flex;
		flex-wrap: wrap;

		.facilitiesItemA {
			width: 20%;
			display: flex;
			justify-content: center;
		}

		.active {
			border: 2rpx solid #e5632b !important;
		}

		.facilitiesItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 110rpx;
			height: 110rpx;
			opacity: 1;
			border-radius: 16rpx;
			border: 2rpx solid rgba(229, 233, 239, 1);

			image {
				width: 48rpx;
				height: 48rpx;
			}

			view {
				font-size: 22rpx;
			}
		}
	}

	.formItem {
		border-bottom: 1rpx solid #f1f4f8;
		padding: 24rpx 0;

		input {
			text-align: right;
		}
	}
</style>
